<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-switch/3.3.4/css/bootstrap2/bootstrap-switch.css">
</head>
<body>
<h1>表格演示</h1>
<!--数据表格-->
<div class="row">
    <div class="col-md-12">
        <!--数据表格-->
        <table id="table">
        </table>
    </div>
</div>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-switch/3.3.4/js/bootstrap-switch.min.js"></script>
<script>
    /**
     * 刷新switch开关的方法
     */
    function refreshSwitch() {
        $('.status').bootstrapSwitch({
            onText:"开启",
            offText:"关闭",
            onColor:"success",
            offColor:"info",
            size:"small"
        })
    }

    function editStatus(id,status){
        console.log(id,status)
        var params = {"id":id,"operate":status};
        rest("/ac/update.json","POST",params,"application/x-www-form-urlencoded","json",true,function () {
            
        })
    }
    function rest(restUrl, httpMethod, param, contenttype, datatype, async,callback) {
        var request=$.ajax({url:restUrl,type:httpMethod,data:param,contentType:contenttype,async: async,dataType:datatype});
        request.done(function (data) {
            try {
                if (data === null || data === undefined) {
                } else {
                }
            }catch (e){
            }
        })

        request.fail(function(textStatus, errorThrown) {

        })
    }
    $('#table').bootstrapTable({
        url: '/ac/order.json',         //请求后台的URL（*）
        method: 'post',                      //请求方式（*）
        toolbar: '#toolbar',                //工具按钮用哪个容器
        striped: true,                      //是否显示行间隔色
        cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        pagination: false,                   //是否显示分页（*）
        sortable: true,                     //是否启用排序
        sortOrder: "asc",                   //排序方式
        queryParamsType:'',
        sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
        pageNumber:1,                       //初始化加载第一页，默认第一页
        strictSearch: false,
        clickToSelect: false,                //是否启用点击选中行
        //height: 460,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
        uniqueId: "id",                     //每一行的唯一标识，一般为主键列
        cardView: false,                    //是否显示详细视图
        detailView: false,                   //是否显示父子表
        showHeader:true,                   //隐藏标题头
        search:true,
        showColumns:true,                   //是否显示 内容列下拉框
        showRefresh:true,                   //是否显示 刷新按钮
        //showToggle:true,                    //是否显示 切换试图（table/card）按钮
        //showPaginationSwitch:true,          //是否显示 数据条数选择框
        checkboxHeader:true,
        searchText:'',
        onLoadSuccess: function(){  //加载成功时执行
            refreshSwitch()
        },
        formatSearch: function () {
            return '权限名称';
        },

        columns: [{
            checkbox:true
        },{
            field: 'id',
            title: '权限ID'
        },{
            field: 'dataName',
            title: '上级权限ID'
        },{
            field: 'operate',
            title: '操作',
            align: 'center',
            formatter: function(value, row, index){
                if(value=="0"){
                    return "<input name='status' class='status' type='checkbox' data-size='small' onchange=editStatus('"+row.id+"','"+1+"');>"
                }
                if(value=="1"){
                    return "<input name='status' class='status' type='checkbox'  checked='checked'  data-size='small' onchange=editStatus('"+row.id+"','"+0+"');>"
                }
            }
        }]

    });
</script>
</body>
</html>